<template>
  <van-address-edit
    :area-list="areaList"
    :address-info="info"
    :show-delete="address.editIdx != -1"
    show-set-default
    show-search-result
    :search-result="searchResult"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
import type { AddressEditInfo } from "vant";
// import { AddressInfoType } from "../../types/user";
import { useAddress } from "../../store/address";
const address = useAddress();
const searchResult = ref<any>([]);
// 测试方便
// const addressInfo = reactive({
//   name: "新地址",
//   tel: "13877778888",
//   province: "重庆",
//   city: "重庆",
//   county: "九龙区",
//   addressDetail: "渝高大厦",
//   isDefault: true,
//   areaCode: "500107",
// });
interface EmitsType {
  (e: "close-pop"): void;
}
const emits = defineEmits<EmitsType>();
const onSave = (info: AddressEditInfo) => {
  console.log(info);

  // 新增地址
  address.addressAddAction({ ...info }); //注意对象引用问题
  // 关闭弹窗
  emits("close-pop");
};
const onDelete = () => {
  emits("close-pop");
  address.addressDelAction();
};

// edit组件每次展示的时候都要执行一段逻辑
// console.log("edit组件setup执行了");
const info = computed(() => {
  if (address.editIdx == -1) {
    return {
      name: "",
      tel: "",
      province: "",
      city: "",
      county: "",
      addressDetail: "",
      isDefault: false,
      areaCode: "",
    };
  } else {
    return address.addressList[address.editIdx]; //编辑
  }
});
</script>

<style scoped></style>
